<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <!-- 统计卡片 -->
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-card">
          <div class="card-header">
            <i class="el-icon-shopping-cart-full card-icon"></i>
            <div class="card-title">
              <h3>商品总数</h3>
              <p>{{ statistics.productCount }}</p>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-card">
          <div class="card-header">
            <i class="el-icon-s-order card-icon"></i>
            <div class="card-title">
              <h3>订单总数</h3>
              <p>{{ statistics.orderCount }}</p>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-card">
          <div class="card-header">
            <i class="el-icon-user card-icon"></i>
            <div class="card-title">
              <h3>团长总数</h3>
              <p>{{ statistics.leaderCount }}</p>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-card">
          <div class="card-header">
            <i class="el-icon-warning card-icon"></i>
            <div class="card-title">
              <h3>库存预警</h3>
              <p>{{ statistics.stockWarningCount }}</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" class="mt-20">
      <!-- 库存预警列表 -->
      <el-col :span="12">
        <el-card shadow="hover" class="dashboard-table-card">
          <div slot="header" class="card-header">
            <h3>库存预警</h3>
            <el-button type="text" @click="goToStockWarning">查看更多</el-button>
          </div>
          <el-table :data="stockWarningList" style="width: 100%" size="mini" v-loading="loading">
            <el-table-column prop="name" label="商品名称"></el-table-column>
            <el-table-column prop="categoryName" label="分类"></el-table-column>
            <el-table-column prop="stock" label="当前库存"></el-table-column>
            <el-table-column prop="stockWarning" label="预警值"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
      
      <!-- 最近订单列表 -->
      <el-col :span="12">
        <el-card shadow="hover" class="dashboard-table-card">
          <div slot="header" class="card-header">
            <h3>最近订单</h3>
            <el-button type="text" @click="goToOrder">查看更多</el-button>
          </div>
          <el-table :data="recentOrderList" style="width: 100%" size="mini" v-loading="loading">
            <el-table-column prop="orderNo" label="订单编号" width="180"></el-table-column>
            <el-table-column prop="totalAmount" label="金额" width="100">
              <template slot-scope="scope">
                ¥{{ scope.row.totalAmount }}
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template slot-scope="scope">
                <el-tag :type="getOrderStatusType(scope.row.status)">
                  {{ getOrderStatusText(scope.row.status) }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getAdminDashboardData } from '@/api/admin'

export default {
  name: 'AdminDashboard',
  data() {
    return {
      loading: false,
      statistics: {
        productCount: 0,
        orderCount: 0,
        leaderCount: 0,
        stockWarningCount: 0
      },
      stockWarningList: [],
      recentOrderList: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.loading = true
      getAdminDashboardData().then(response => {
        this.statistics = response.statistics || {
          productCount: 0,
          orderCount: 0,
          leaderCount: 0,
          stockWarningCount: 0
        }
        this.stockWarningList = response.stockWarningList || []
        this.recentOrderList = response.recentOrderList || []
        this.loading = false
      }).catch(() => {
        this.loading = false
        // 如果API调用失败，使用默认数据
        this.statistics = {
          productCount: 0,
          orderCount: 0,
          leaderCount: 0,
          stockWarningCount: 0
        }
        this.stockWarningList = []
        this.recentOrderList = []
      })
    },
    getOrderStatusText(status) {
      const statusMap = {
        0: '待处理',
        1: '已处理',
        2: '配送中',
        3: '已完成',
        4: '已取消'
      }
      return statusMap[status] || '未知'
    },
    getOrderStatusType(status) {
      const typeMap = {
        0: 'info',
        1: 'primary',
        2: 'warning',
        3: 'success',
        4: 'danger'
      }
      return typeMap[status] || ''
    },
    goToStockWarning() {
      this.$router.push('/admin/product')
    },
    goToOrder() {
      this.$router.push('/admin/order')
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  
  .dashboard-card {
    height: 120px;
    
    .card-header {
      display: flex;
      align-items: center;
      
      .card-icon {
        font-size: 48px;
        color: #409EFF;
        margin-right: 20px;
      }
      
      .card-title {
        h3 {
          font-size: 16px;
          color: #666;
          margin: 0 0 10px 0;
        }
        
        p {
          font-size: 24px;
          color: #333;
          margin: 0;
        }
      }
    }
  }
  
  .mt-20 {
    margin-top: 20px;
  }
  
  .dashboard-table-card {
    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      
      h3 {
        font-size: 16px;
        margin: 0;
      }
    }
  }
}
</style> 